import React from 'react';
// import './index.less';
// import 'lib-flexible'
// 引入SDK
// SDK是指软件开发工具包
import { ZegoExpressEngine } from 'zego-express-engine-webrtc';
export default function View() {
    // 项目唯一标识 AppID，Number 类型，请从 ZEGO 控制台获取
    let appID = 1547187639;
    // 接入服务器地址 Server，String 类型，请从 ZEGO 控制台获取（获取方式请参考上文“前提条件”）与服务器的WebSocket通信地址
    let server = 'wss://webliveroom1547187639-api.imzego.com/ws';
    // 初始化实例
    const zg = new ZegoExpressEngine(appID, server);
    zg.setDebugVerbose(false);
    // 房间状态更新回调
    // 此处在登录房间成功后，立即进行推流。在实现具体业务时，您可选择其他时机进行推流，只要保证当前房间连接状态是连接成功的即可。
    // 房间状态更新回调
    zg.on('roomStateChanged', async (roomID, reason, errorCode, extendedData) => {
        if (reason == 'LOGINED') {
            console.log(
                '与房间连接成功，只有当房间状态是连接成功时，才能进行推流、拉流等操作。',
            );
        }
    });

    zg.on('roomUserUpdate', (roomID, updateType, userList) => {
        // 其他用户进出房间的通知
        console.log(userList)
    });

    zg.on(
        'roomStreamUpdate',
        async (roomID, updateType, streamList, extendedData) => {
            // 房间内其他用户音视频流变化的通知


            // roomID房间的id
            // updateType DELETE：流删除，ADD：流新增
            // streamList 更新流列表，数组顺序是以服务器接收到的时间进行排序。
            // extendedData 扩展信息
            if (updateType == 'ADD') {
                // 流新增，开始拉流
                // 此处演示拉取流新增的列表中第一条流的音视频
                // console.log(streamList,'1111111')
                // 拿到一个数组里面包含streamID userID userName等等
                const streamID = streamList[0].streamID;
                // streamList 中有对应流的 streamID  startPlayingStream开始拉流
                const remoteStream = await zg.startPlayingStream(streamID);
                // 创建远端媒体流播放器组件实例对象。 createRemoteStreamView用于播放拉流
                const remoteView = zg.createRemoteStreamView(remoteStream);
                // play 在页面上播放媒体流的音视频
                remoteView.play('remote-video', { enableAutoplayDialog: true });
            } else if (updateType == 'DELETE') {
                // 流删除，通过流删除列表 streamList 中每个流的 streamID 进行停止拉流。
                const streamID = streamList[0].streamID;
                zg.stopPlayingStream(streamID);

                // 根据本端 streamID 停止推流
                zg.stopPublishingStream(streamID);
                // localStream 是调用 createStream 接口获取的 MediaStream 对象
                // zg.destroyStream(localStream);
            }
        },
    );

    // 登录房间，成功则返回 true
    // userUpdate 设置为 true 才能收到 roomUserUpdate 回调。
    let userID = '123'; // userID 用户自己设置，必须保证全局唯一
    let userName = 'zcx1'; // userName 用户自己设置，没有唯一性要求
    let roomID = 'zcxRoom'; // roomID 用户自己设置，必须保证全局唯一
    // token 由用户自己的服务端生成，为了更快跑通流程，可以通过即构控制台 https://console.zego.im/ 获取临时的音视频 token，token 为字符串
    let token = `04AAAAAGVcS4EAEGM5cDl0bmg2eTNvNzltb3QAoMZ93U9cpVOtJ/pWNw8mdR8kIwrJmpURb4fFOTOE3BpGYfoJiDa9Fegt6wihXmPZnBz2E2uja6hdSh396uFw6uHm6cRMzUvolskkWTySWQGfuEzRwvnkziFhmioEgFB4XaXr7OMXhof0RDRbN0J3N3pnpiL+mZY7rqeeBWEfHwFBcgFCNa50nC6cKBiL8B66dJUEQJWGURF978gxnfGsexI=`;
    zg.loginRoom(
        roomID,
        token,
        { userID, userName: userID },
        { userUpdate: true },
    ).then(async (result) => {
        if (result == true) {
            console.log('login success');
            // 开始推流前需要创建本端的音视频流，调用 createStream 接口获取媒体流对象，默认会采集摄像头画面和麦克风声音。媒体流对象可以使用 createLocalStreamView 创建本地媒体流播放组件进行播放，也可以通过 video 元素 srcObject 属性赋值进行播放。
            // 与房间连接成功，只有当房间状态是连接成功时，才能进行推流、拉流等操作。
            // 创建流、预览
            // 调用 createStream 接口后，需要等待 ZEGO 服务器返回流媒体对象才能执行后续操作
            const localStream = await zg.createStream();
            // 创建媒体流播放组件
            if (localStream === undefined) return false;
            const localView = zg.createLocalStreamView(localStream);
            localView.play('local-video', { enableAutoplayDialog: true });
            // 开始推流，将自己的音视频流推送到 ZEGO 音视频云，此处 streamID 由用户定义，需全局唯一
            let streamID = new Date().getTime().toString();
            zg.startPublishingStream(streamID, localStream);
        }
    });

    // // 登录房间的第二种写法
    // (async function main(){
    //     await zg.loginRoom(roomID, token, { userID, userName: userID }, { userUpdate: true })
    // })()
    let startVideo = () => {
        console.log(123);
    };

    return (
        <div className="video-call">
            <div className="video-call-context-v">
                视频通话
            </div>
            <div className="video-call-bendivideo1">
                <div id="local-video"></div>
                <div id="remote-video"></div>
                <div className='off'><button onClick={() => {
                    zg.logoutRoom(roomID);
                    zg.destroyEngine();
                    // history.push('/chat');
                }}>x</button></div>
            </div>
        </div>
    );
}
